<style scoped>
	#mapicon{
		line-height:44px;
		font-size:16px;
		color:red;
	}
	#city{
		color:red;
		line-height: 44px;
		margin-left: 5px;
		position: relative;
	}
	#city::after{
		content: "";
    border: 8px solid transparent;
    border-top-color: red;
    border-left-width: 4px;
    border-right-width: 4px;
    position: absolute;
    top: 50%;
    margin-top: -3px;
    margin-left: 8px;
	}
	select{
		position: absolute;
		top:0;
	}
	vue-area{
		position: absolute;
		top: 0;
	}
</style>
<template>
<div style="position:relative;z-index:2;" @click="getarea">
	<span class="glyphicon glyphicon-map-marker" id="mapicon"></span> <span id="city">{{result.area?result.area.name:result.city}}</span>
</div>
	
	<!-- 选择地区的页面 -->
	<vue-area :show.sync="show" :result.sync="result"></vue-area>
</template>
<script>
	var vueArea = require('vue-area');
	module.exports = {
		components: {
        vueArea
    },
    data: function(){
    	return {
        result: {city:"北京市"},
        show: false
    	}
    },
    methods:{
    	getarea:function(){
    		this.show = true;
    	}
    }
	}
</script>